import React, { useEffect, useState } from "react";
import { View, Text } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { Square } from "../../utils";
import './products.less'


const Products = () => {
  const [products, setProducts]: [any, any] = useState([])
  useEffect(() => {
    Taro.request({
      url: `${process.env.PREFIX}/product/list`,
    }).then(r => {
      setProducts(r.data.data)
    })
  }, [])

  const click= (id:number)=>{
    Taro.navigateTo({
      url: `/pages/mall/productDetail?id=${id}`,

    })
  }

  return (
    <View>
      <View className='hh'>sort</View>
      <View>
        {products.map(it => {
          return (
            <View key={it.id} className='flex-row product center' onClick={()=>click(it.id)}>
              <View className='product-logo'><Square /></View>
              <View className='flex-column product-view'>
                <View style='width: 100%'>{it.name}</View>
                <Text className='origin-price'>原价: 98元</Text>
                <View>{it.price} <Text>金币</Text></View>
              </View>
            </View>
          )
        })}
      </View>
    </View>
  )
}

export default Products
